<template>
	<div class="p-table">
		<add-product @flash="getTableData()"></add-product>
		<el-table :data="tableData" stripe>
			<el-table-column label="ID" prop="id" width="40px" align="center"></el-table-column>
			<el-table-column label="图片" align="center" width="60px">
				<template slot-scope="scope">
					<img :src="scope.row.firstProductImage.address" alt="无图" width="50px" height="50px" v-if="scope.row.firstProductImage">
				</template>
			</el-table-column>>
			<el-table-column label="产品名称" prop="name" width="350px"></el-table-column>
			<el-table-column label="产品小标题" prop="subTitle" width="200px"></el-table-column>
			<el-table-column label="原价格" prop="originalPrice"></el-table-column>
			<el-table-column label="优惠价格" prop="promotePrice"></el-table-column>
			<el-table-column label="库存" prop="stock" align="center" width="50px"></el-table-column>
			<el-table-column label="图片管理" align="center" width="80px">
				<template slot-scope="scope">
					<i class="el-icon-picture" @click="jump2ProductImage(scope.row.id)"></i>
				</template>
			</el-table-column>>
			<el-table-column label="设置属性" align="center" width="80px">
				<template slot-scope="scope">
					<i class="el-icon-s-operation" @click="jump2ProductProperty(scope.row.id)"></i>
				</template>
			</el-table-column>>
			<el-table-column label="编辑" align="center" width="50px">
				<template slot-scope="scope">
					<edit-product :row="scope.row" @flash="getTableData()"></edit-product>
				</template>
			</el-table-column>>
			<el-table-column label="删除" align="center" width="50px">
				<template slot-scope="scope">
					<del-product :row="scope.row" @flash="getTableData()"></del-product>
				</template>
			</el-table-column>
		</el-table>
		<page-num :totalPages="totalPages" :currentPage="currentPage"></page-num>
	</div>
</template>

<script>
	import AddProduct from './add_product.vue'
	import EditProduct from './edit_product.vue'
	import DelProduct from './del_product.vue'
	import PageNum from './page_num.vue'
  import {getProducts} from '@/api/admin/product.js'
	export default{
		data() {
			return {
				tableData: [],
        totalPages:null,
        currentPage:1,
			}
		},
		components: {
			AddProduct,
			EditProduct,
			DelProduct,
			PageNum
		},
		methods: {
			jump2ProductImage(id) {
				this.$router.push('/admin/product_image?productId='+id)
			},
			jump2ProductProperty(id){
				this.$router.push('/admin/product_property?productId='+id)
			},
      getTableData(){
        this.currentPage = this.$route.query.pageId ? this.$route.query.pageId : 1
        let data = {
          cid:this.$route.query.id,
          start:this.currentPage
          }
        getProducts(data).then(res => {
          this.tableData = res.data.pageFromJPA.content
          this.totalPages = res.data.totalPages
        })
      }
		},
    created() {
      this.getTableData()
    },
    watch: {
      $route(newValue, oldValue) {
        this.currentPage = this.$route.query.pageId ? Number(this.$route.query.pageId) : 1
        this.getTableData()
      }
    },
	}
</script>

<style scoped>
	.p-table{
		width: 90%;
		margin: 20px auto;
	}
	i{
		font-size: 20px;
	}
	i:hover{
		color: #409EFF;
	}
</style>
